<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="18">
        <task-edit-item :formData.sync="formData" ref="taskEditItem"></task-edit-item>
      </el-col>
      <el-col :span="6">
        <el-card class="tabs">
          <el-tabs v-model="first">
            <el-tab-pane label="评论" name="first">
              <comment-pan :formData.sync="formData" ref="commentPan"></comment-pan>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commentPan from "./commentPan";
import taskEditItem from "./taskEditItem";
import projectTaskApi from "@/api/projectTaskApi"
export default {
  name: "taskEdit",
  components: {
    commentPan,
    taskEditItem
  },
  data () {
    return {
      first: 'first',
      formData: {},
      disX: 0,
      wLeft: 0
    }
  },
  activated () {
    if (this.$route.params.id) {
      this.formData.id = this.$route.params.id
      this.getTaskById()
    }
  },
  mounted () {
    if (this.$route.params.id) {
      this.formData.id = this.$route.params.id
      this.getTaskById()
    }
  },
  methods: {
    // 初始化
    initData (data) {
      if (data.hasOwnProperty('Status')) {
        data.Status = data.Status || '1'
        data.Status = data.Status.toString()
      } else {
        this.$set(data, 'Status', '1')
      }
      if (data.hasOwnProperty('Type')) {
        data.Type = data.Type || '1'
        data.Type = data.Type.toString()
      } else {
        this.$set(data, 'Type', '1')
      }
    },
    // 通过任务id获取相关信息
    getTaskById () {
      if (this.formData.id) {
        projectTaskApi.getById(this.formData).then(res => {
          for (let [key, value] of Object.entries(res)) {
            if (key === 'Ended' || key === 'Started') {
              this.$set(this.formData, `${key}`, value || '')
            } else {
              this.$set(this.formData, `${key}`, value)
            }
          }
          this.$refs.commentPan.getComments(this.formData)
          this.$nextTick(() => {
            if (this.$refs.taskEditItem) this.$refs.taskEditItem.loadProjectTeam()
          })
          this.initData(this.formData)
        })
      } else {
        this.initData(this.formData)
      }
    },
  }
}
</script>

<style scoped>
.tabs >>> .el-card__body {
  height: calc(100vh - 150px);
  min-height: 200px;
}
.tabs >>> .el-tabs {
  height: 100%;
}

.tabs >>>  .el-tabs {
  display: flex;
  flex-direction: column;
}
.tabs >>>  .el-tabs .el-tabs__content {
  flex: 1;
}
.tabs >>>  .el-tabs .el-tabs__content .el-tab-pane {
  height: 100%;
}
</style>